<nz-select [nzSize]="size" [ngModel]="selectedRef" [nzDropdownMatchSelectWidth]="false"
	(click)="$event.stopPropagation()" [nzDropdownRender]="selectTemplate" [nzOptionHeightPx]="0"
	[nzCustomTemplate]="selectLabelTmpl" [nzDisabled]="disabled" [nzPlaceHolder]="placeHolder" #select>

	<nz-option *ngFor="let opt of branches" [nzValue]="'refs/heads/' + opt.display_id"
		[nzLabel]="opt.display_id"></nz-option>
	<nz-option *ngFor="let opt of tags" [nzValue]="'refs/tags/' + opt.tag" [nzLabel]="opt.tag"></nz-option>

	<ng-template #selectTemplate>
		<div *ngIf="branches?.length > 0 || tags?.length > 0" class="container" [class.night]="darkActive">
			<nz-input-group [nzSuffix]="suffixIconSearch">
				<input type="text" nz-input placeholder="Search for ref" (input)="onFilterRefChange($event)" />
			</nz-input-group>
			<ng-template #suffixIconSearch>
				<span nz-icon nzType="search"></span>
			</ng-template>

			<nz-tabset *ngIf="selectedRef" nzSize="small" [nzSelectedIndex]="selectedRef.startsWith('refs/tags/') ? 1 : 0"
				nzType="card">
				<nz-tab [nzTitle]="branchesTitle">
					<ng-template #branchesTitle>
						<span nz-icon nzType="branches" nzTheme="outline"></span>
						Branches
					</ng-template>
					<div class="options">
						<div class="option" [title]="opt.display_id" *ngFor="let opt of filteredBranches"
							[class.active]="selectedRef === 'refs/heads/' + opt.display_id"
							(click)="clickOption('refs/heads/' + opt.display_id)">{{opt.display_id}}</div>
					</div>
					<nz-empty *ngIf="!filteredBranches || filteredBranches.length === 0" nzNotFoundImage="simple"></nz-empty>
				</nz-tab>
				<nz-tab [nzTitle]="tagsTitle">
					<ng-template #tagsTitle>
						<span nz-icon nzType="tags" nzTheme="outline"></span>
						Tags
					</ng-template>
					<div class="options">
						<div class="option" [title]="opt.tag" *ngFor="let opt of filteredTags"
							[class.active]="selectedRef === 'refs/tags/' + opt.tag" (click)="clickOption('refs/tags/' + opt.tag)">
							{{opt.tag}}</div>
					</div>
					<nz-empty *ngIf="!filteredTags || filteredTags.length === 0" nzNotFoundImage="simple"></nz-empty>
				</nz-tab>
			</nz-tabset>
		</div>
	</ng-template>

	<ng-template #selectLabelTmpl let-selected>
		<span nz-icon [nzType]="selected.nzValue.startsWith('refs/tags/') ? 'tags' : 'branches'" nzTheme="outline"></span>
		{{ selected.nzLabel }}
	</ng-template>

</nz-select>